<html>
<head>
    <title>Do You Know HACKER-2</title>
</head>

<body>
    <div align="center">
        <canvas id="myCanvas" width="1024" height="800" style="border:1px solid #c3c3c3;">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var YPositions = Array(51).join(0).split('');
            /*
                join() 方法用于把数组中的所有元素放入一个字符串
                split() 方法用于把一个字符串分割成字符串数组
            */
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";
                YPositions.map(function (y, index) {
                    /*
                        map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象
                    */
                    x = (index * 10);
                    ctx.fillText(parseInt(Math.random() * 10), x, y);
                    /*
                        在(x,y)坐标位产生一个'a'字符
                        index为Ypositions的下标
                    */
                    if (y > 500) {
                        YPositions[index] = 0;
                    } else {
                        YPositions[index] = y + 10;
                    }
                    /*
                        如果新产生的字符已经到了<canvas>的辩解
                        那么就使产生下一个新字符的位置回归到原点
                     */
                });
            };
            setInterval(draw, 30);
        </script>
</body>
</html>